<template>
	<view class="withdrawal">
		<view class="navBox" @click="gotoPage('/pages/theater/revenueRecords')">
			<view class="navBg">
				<view class="navBgLeft">
					<view style="display: flex;align-items: center">
						金币收益(币)
						<uni-icons type="right"></uni-icons>
					</view>
					<view class="navNum">
						{{userInfo.balance || 0}}
					</view>
				</view>
				<view class="navBgLeft">
					<view style="display: flex;align-items: center">
						现金收益(元)
						<uni-icons type="right"></uni-icons>
					</view>
					<view class="navNum">
            {{userInfo.money / 100 || 0}}
          </view>
				</view>
			</view>
		</view>
		<view class="amount">
			<view class="amountkuang" >
				<view :class="{amountitem:true,activate:index===activate}" v-for="(item,index) in list" :key="index" @click="activate = index">
					{{item.money / 100}}元
				</view>
			</view>
			<view class="zhifu">
				<view class="zhiful">
					<image  src="../../static/theater/zhifubao.png" mode=""></image>
					<view>支付宝</view>
				</view>
				<view class="zhifur" @click="gotoPage('/pages/theater/bindAlipay')">
					<view>绑定支付宝账号</view>
					<image  src="@/static/theater/you.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="tixianbtn" @click="withdrawal">
			立即提现
		</view>
		<view class="money">温馨提示</view>
    <view class="" v-for="(item, index) in rechargeInstructions" :key="index">
      <view class="explanation">{{index+1 }}.{{ item }}</view>
    </view>
	</view>
</template>

<script>
import {mapActions,mapMutations} from 'vuex'
import {gotoPage} from "../../utils/common";
import {Api} from "../../service/api";
	export default {
		data() {
			return {
				list:[],
        activate: 0,
        userInfo: {},
        rechargeInstructions: []
			}
		},
		async onShow(){
      this.userInfo = await this.getInfoMethod()
      const list = await this.getAppConfigMethod()
      const regex = /\d+\./g; // 匹配数字和句号的正则表达式
      this.rechargeInstructions = list.rechargeInstructions.split(regex).filter(item => item !== '');
		},
    onLoad() {
      this.getWithdrawList()
    },
		methods: {
      ...mapActions('appInfo', ['getAppConfigMethod', 'getAppInfoMethod']),
      ...mapActions('userInfo', ['getInfoMethod']),
      ...mapMutations('userInfo', ['setInfoMethod']),
      gotoPage,
      async withdrawal(){
       if(this.userInfo.money < this.list[this.activate].money){
         uni.showToast({
           title: '余额不足',
           icon: 'none',
           duration: 2000
         });
       }else{
         await Api.withdraw({
           rechargeAmount: this.list[this.activate].money
         })
         const {data} = await Api.getUserMoney()
         this.userInfo.money = data
         console.log(this.userInfo, data, 'this.userInfo');
         this.setInfoMethod(this.userInfo)
         uni.showToast({
           title: '提交成功，等待审核',
           icon: 'none',
         });
       }
      },
      getWithdrawList(){
        Api.getWithdrawList().then(res=>{
          console.log(res.data);
          this.list = res.data
        })
      }
		},
	}
</script>

<style lang="scss" scoped>
	.withdrawal {
		padding: 0 28rpx;
		background-color: #F1F7FC;
		height: 100vh;
		overflow: hidden;

		.navBox {
			margin-top: 10rpx;
			width: calc(100% - 40rpx);
			height: 162rpx;
			color: #FFFFFF;
			border-radius: 28rpx;
			padding: 6rpx 18rpx;
			text-align: right;
			position: relative;
			background-color: #FFFFFF;
			display: flex;
			// background-size: 100% 100%;
			// background-image: url("../../../static/theater/indexNavBg.png");
			// background-repeat: no-repeat;

			.navBg {
				width: 100%;
				color: #2A2A2A;
				text-align: left;
				font-size: 24rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				float: left;
				position: relative;

				&::after {
					content: '';
					width: 2rpx;
					height: 22rpx;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					background-color: #ABABAB;
				}

        .navBgLeft{
          display: flex;
          flex-direction: column;
          justify-content: center;

          .navNum {
            font-size: 40rpx;
            font-weight: 700;
          }
        }
			}
		}
		.amount{
			margin-top: 20rpx;
			padding: 24rpx 32rpx;
			background-color: #FFFFFF;
			.amountkuang{
				display: flex;
				flex-wrap: wrap;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				.amountitem{
					width: 204rpx;
					height: 152rpx;
					text-align: center;
					background-color: #F2F2F2;
					line-height: 152rpx;
					border-radius: 16rpx;
					margin-bottom: 24rpx;
				}
        .activate{
          background: #FFE4E4;
          color: #FD6118;
        }
			}
			.zhifu{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.zhiful{
					display: flex;
					align-items: center;
					font-size: 28rpx;
					font-weight: 700;
					image{
						width: 46rpx;
						height: 46rpx;
						margin-right: 12rpx;
					}
				}
				.zhifur{
					font-size: 24rpx;
					color: #8B8B8B;
					display: flex;
					align-items: center;
					image{
						width: 12rpx;
						height: 12rpx;
						margin-left: 6rpx;
					}
				}
				
			}
		}
		.tixianbtn{
			width: 580rpx;
			height: 88rpx;
			text-align: center;
			line-height: 88rpx;
			background-color: #E81F4B;
			color: #FFFFFF;
			border-radius: 208rpx;
			margin: 0 auto;
			margin-top: 38rpx;
		}
		.money{
			font-size: 28rpx;
			font-weight: 700;
			margin-top: 26rpx;
		}
    .explanation {
      color: #606060;
      font-size: 22rpx;
      line-height: 40rpx;
    }
	}
</style>
